3.6 How to position an element? How to move an element?

This is an example of vertical and horizontal centering:
This course is a lot of fun. This course is a lot of fun. This course is a lot of fun. This course is a lot of fun.

Prerequisites:
- The fundamental concepts of HTML
- How to access HTML element objects from JavaScript code
- How to use events and event listeners

Motivations
- Can you write 'cs.tru.ca' at the horizontal center and at the bottom?
- Can you write the example button always at the right side?
- How to display a SignIn modal window at the horizontal center?

How to position an element?
- You may need to know the dimension of the window. How to obtain the dimension?
  - The window object represents an open window in a browser. This object has many properties including the dimension of the window. Find the properties, such as innerWidth and innerHeight, from The Window Object.
  - What if the window shrinks or expands? How do you obtain the new width and height, i.e., viewport?
    - What event is triggered when the dimension of the window is changed?
      resize
    - Here is an example.
```
window.addEventListener('resize', listener);
```
    - Trial 1: Let's try to print the new width and height of the window content area when the window is resized.
      <p id='tr1-msg'>Width and height: </p> <???> window.???('???', tr1_eh); function ???(eobj) { ????('tr1-msg').??? = 'Width = ' + ????.innerWidth + ', height = ' + ????; } </script>
- You also need to know the dimension of HTML elements. How to obtain the dimension? What CSS properties are used for that?
  - width, height
  - margin, border, padding
  - Review 3.1.10
- How to position, i.e., align, text? Read all in CSS text-align Property.
  - List the four ways to align text.
  - Center of what?
  - Trial 2: Let's try the four types of text alignment with <span> and <p> to see what happens.
    <span ????>What a wonderful!</span> <p ????>world!</p> <span ????>What a wonderful!</span> <p ????>world!</p> <span ????>What a wonderful!</span> <p ????>world!</p> <span ????>What a wonderful!</span> <p ????>What a wonderful world!</p>
- How to display an element at a certain position? Read all in CSS position Property.
  - 'position' with 'left' and 'top' CSS properties. Sometimes with 'right' and 'bottom' CSS properties as well.
  - List the four ways to position HTML elements, i.e., position property values. How are they different?
  - Here are more examples in CSS Positioning. Try all the examples.
  - You may review 3.1.
- Horizontal Centering: How to position an element at the horizontal center within the outer dimension, i.e., parent element?
  - Read all in CSS Margin.
    - What does margin do?
    - What does the 'auto' value do?
    - 'auto' works only for block elements with relative and static positioning. Do you remember how to change an inline element to block type?
    - Try this example.
  - Trial 3: Here is an example. Try this example yourself.
```
<style>
    p { background-color: SkyBlue; }
    p.left { width: 70%; margin-right: auto; }
    p.right { width: 70%; margin-left: auto; }
    p.horizontal-center { width: 400px; margin: auto; }
    p.just { margin-top: 40px; margin-bottom: 20px; margin-left: 100px; margin-right: 50px; }
    p.inside { width: 60%; margin: auto; margin-top:20px; }
</style>
<p>This course is a lot of fun. This course is a lot of fun. This course is a lot of fun. This course is a lot of fun.</p>
<p class='left'>This course is a lot of fun. This course is a lot of fun. This course is a lot of fun. This course is a lot of fun.</p>
<p class='right'>This course is a lot of fun. This course is a lot of fun. This course is a lot of fun. This course is a lot of fun.</p>
<p class='horizontal-center'>This course is a lot of fun. This course is a lot of fun. This course is a lot of fun. This course is a lot of fun.</p>
<p class='just'>This course is a lot of fun. This course is a lot of fun. This course is a lot of fun. This course is a lot of fun.</p>
<div style='width:80%; height:200px; border: 5px solid Blue;'>
    <p class='inside'>This course is a lot of fun. This course is a lot of fun. This course is a lot of fun. This course is a lot of fun.</p>
</div>
```
  - How are the paragraphs in the above example displayed in different ways?
  - Trial 4: Let's try the horizontal centering with 'margin:auto'. Can you give proper CSS code for the <p>?
    <div style='width:400px; height:100px; border:1px solid SkyBlue;'> <p style='width:200px; background-color:Grey; ????'>Horizontal centering with margin:auto</p> </div>
  - How to do the horizontal centering for 'fixed' and 'absolute' positioned elements? E.g., the link at the bottom.
    - For fixed positioned elements, you may need to use vw and vh measurements, where vw is for viewport width and vh is for viewport height. 0vw ~ 100vw, and 0vh ~ 100vh. For absolute positioned elements, you may need to use % measurement. You may also need to calculate the correct position, using 'calc()'. It supports simple arithmetic operations in CSS.
    - E.g., the horizontal center with fixed positioning; Note that calc(50vw-55px) does not work because 50vw-55px will be considered as an identifier in CSS styling. It should be calc(50vw - 55px). Spaces around '-' are necessary.
```
<p style='width:250px; position:fixed; top:25%; left:???(????); background-color:Grey; text-align:center; z-index:1; font-size:200%'>
    <a href='//cs.tru.ca'>cs.tru.ca</a>
</p>
```
    - Trial 5: Let's try the above code for horizontal centering.
    - Trial 5.5: Let's try to display an inner <div> box at the horizontal center within the outer <div> box. The outer <div> uses relative positioning and the inner <div> uses ??? positioning.
      <div style='position: relative; height: 200px; border: 2px solid SkyBlue'> <div style='position: ???; top: 20px; width: 300px; height: 100px; background-color: Grey; ????'> </div> </div>
- Vertical Centering: How to position an element at the vertical center of the outer dimension?
  - Can you use margin-top and margin-bottom?
    Unfortunately not easy. Then?
  - You can use 'table-cell' display type with 'vertical-align: middle' CSS property. Here is an example.
```
<style>
    div.outside { position:relative; ???:???; ???:???; width:400px; height:200px; border:1px solid blue; }
</style>
<p>This course is a lot of fun. This course is a lot of fun. This course is a lot of fun. This course is a lot of fun.</p>
<div class='outside'>
    <div style='border:1px solid black; text-align:center; width:60%; height:100px; position:relative; ????'>This course is a lot of fun. This course is a lot of fun. This course is a lot of fun. This course is a lot of fun.</div>
</div>
```
  - Trial 6: Let's try the vertical centering. Can you add the horizontal centering using calc() too?
  - Trial 6.5: Let's update the above example to display the inner box at the exact center using only calc(), not using display:table-cell and vertical-align:middle. Hint: relative or absolute positioning for the outer box, and absolute position for the inner box.
  - Trial 6.6: Let's update the above example to display the inner box at the exact vertical center using only JavaScript. Hint: domobj.offsetWidth, offsetHeight, parentElement. You may read The HTML DOM Element Object.
    <div style='width:600px; height:300px; border:2px solid Blue'> <div id='tr6-6-div' style='border:2px solid Green; text-align:center; width:400px;'> Tim can't be bothered to read. John continues to put in a few hours in every night to work towards another accreditation. </div> </div> <script> ???? </script>
  - Try to complete this exercise program that displays the direction to mouse pointer.

How to move an element - animation effect?
- By setting new position of the element. How to set a new position?
- You may need to repeatedly redisplay the element to give an animation effect. How to use JavaScript Windows timer? Read all in Window setInterval() Method and Window setTimeout() Method.
- Trial 7: Let's try to increase a number every 2 seconds and display it.
  <p>Count: <span id='tr7-msg'></span></p> <???> ??? count = 0; window.???(???() { count++; ???.???('tr7-msg').??? = count; }, ??? ); </script>

Learning outcomes
- How to obtain the dimension of the window.
- How to obtain the dimension of an HTML element.
- How to align text.
- Distinguish and use the four ways to position HTML elements.
- How to display an element at a certain position.
- How to position an element at the horizontal center of the outer dimension.
- How to position an element at the vertical center of the outer dimension.
- How to move an element.